<template>
  <div class="map">
    <div id="mapBox" class="map-box" style="width: 100%;"></div>
    <div class="map-tool">
      <el-button type="primary" plain size="mini" :disabled="this.$data.createBtn" @click="handleCreateBthClick">新建
      </el-button>
      <el-button type="success" plain size="mini" :disabled="this.$data.Update" @click="handleUpdateBthClick">编辑
      </el-button>
      <el-button type="warning" plain size="mini" :disabled="this.$data.Clear" @click="handleClearBthClick">清除
      </el-button>
      <el-button type="danger" plain size="mini" :disabled="this.$data.Close" @click="handleCloseBthClick">结束
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DrawArea',
  props: {
    polygonPath: {
      type: String,
      default: ''
    },
    polygonCoordinate: {
      type: String,
      default: ''
    },
    polygonStyle: {
      type: Object,
      default: () => {
        return {
          fillColor: '#26EB23',
          fillOpacity: 0.9,
          strokeColor: '#00D3FC',
          strokeOpacity: 0.9,
          strokeWeight: 2
        }
      }
    }
  },
  data() {
    return {
      map: null,
      polygon: null,
      // 状态码
      edit: false,
      createBtn: false,
      Clear: false,
      Close: false,
      Update: false
    }
  },
  watch: {
    polygonStyle: {
      handler: function() {
        if (this.polygon) {
          this.resetPolygonStyle()
        }
      },
      deep: true
    }
  },
  async mounted() {
    console.log(123, this)
    await this.initMap()
    this.initPolygonEditor()
  },
  methods: {
    // 初始化map
    initMap() {
      let tLngLat = this.polygonCoordinate.split(",")
      this.map = new T.Map('mapBox')
      this.map.centerAndZoom(new T.LngLat(parseFloat(tLngLat[0]).toFixed(6), parseFloat(tLngLat[1]).toFixed(6)), 16)
      this.map.addControl(new T.Control.Zoom)
      this.map.setMapType(window.TMAP_HYBRID_MAP)
      this.map.disableDoubleClickZoom()
      this.polygonTool = new T.PolygonTool(this.map, {
        color: this.polygonStyle.strokeColor,
        weight: this.polygonStyle.strokeWeight,
        opacity: this.polygonStyle.strokeOpacity,
        fillColor: this.polygonStyle.fillColor,
        fillOpacity: this.polygonStyle.fillOpacity
      })
    },
    /** init polygonEditor
     * isData：determine whether to render with value
     */
    initPolygonEditor(isData = true) {
      if (this.polygonPath && isData) {
        let path = this.polygonPath.split('|').map(item => item.split(','))
        let TPath = []
        path.forEach(item => {
          TPath.push(new T.LngLat(parseFloat(item[0]).toFixed(6), parseFloat(item[1]).toFixed(6)))
        })
        this.polygon = new T.Polygon(TPath, {
          color: this.polygonStyle.strokeColor,
          weight: this.polygonStyle.strokeWeight,
          opacity: this.polygonStyle.strokeOpacity,
          fillColor: this.polygonStyle.fillColor,
          fillOpacity: this.polygonStyle.fillOpacity,
          lineStyle: 'solid'
        })
        this.map.addOverLay(this.polygon)
        this.polygonTool = new T.PolygonTool(this.map, {
          color: this.polygonStyle.strokeColor,
          weight: this.polygonStyle.strokeWeight,
          opacity: this.polygonStyle.strokeOpacity,
          fillColor: this.polygonStyle.fillColor,
          fillOpacity: this.polygonStyle.fillOpacity,
          lineStyle: 'solid'
        })
      }
      // 修改新增按钮默认状态
      this.$data.createBtn = !!this.polygon
    },

    // 画完框最后执行的结束方法
    drawFinish(e) {
      if (e !== undefined) {
        this.polygon = e.allPolygons[e.allPolygons.length - 1]
      }
      // 修改状态码
      this.$data.createBtn = true
      this.$data.Update = false
      this.$data.Close = false
      let path = this.convertArray(this.polygon.getLngLats())
      // 获取中心点
      let coordinatethis = this.getAreaCenter(path)
      console.log(coordinatethis)
      this.$emit('baseCoordinate', coordinatethis)
      this.$emit('change-path', path)
    },
    // 坐标 -> 数组
    convertArray(LngLats) {
      var returnData = []
      LngLats[0].forEach(item => {
        let returnArray = []
        returnArray.push(item.getLng())
        returnArray.push(item.getLat())
        returnData.push(returnArray)
      })
      return returnData
    },
    // 新增按钮方法
    handleCreateBthClick() {
      // 修改状态码
      this.$data.Close = false
      this.polygonTool.setTips('双击或按钮结束')
      this.polygonTool.open()
      this.polygonTool.addEventListener('draw', this.drawFinish)
    },
    // 修改按钮方法
    handleUpdateBthClick() {
      if (this.$data.edit === false) {
        this.map.removeOverLay(this.polygon)
        this.polygon.enableEdit()
        this.map.addOverLay(this.polygon)
        this.$data.edit = true
      } else {
        this.map.removeOverLay(this.polygon)
        this.polygon.disableEdit()
        this.map.addOverLay(this.polygon)
        this.$data.edit = false
      }
      // 修改状态码
      this.$data.Close = false
    },
    // 结束按钮方法
    handleCloseBthClick() {
      console.log(this.polygonTool)
      // 判断是修改还是新增,两个不同的处理方式
      this.polygonTool.endDraw()
      this.drawFinish()
      this.map.removeOverLay(this.polygon)
      this.polygon.disableEdit()
      this.$data.edit = false
      this.map.addOverLay(this.polygon)
    },
    // 清除按钮方法
    handleClearBthClick() {
      this.map.removeOverLay(this.polygon)
      if (Object.keys(this.polygonTool).length === 0) {
        this.polygonTool.clear()
      }
      // 修改状态码
      this.$data.createBtn = false
      this.$data.Close = true
      this.$data.Update = true
    },
    /**
     * 求中心点
     * @param points 数组
     * @returns {string} 天地图坐标类
     */
    getAreaCenter(points) {
      var total = points.length
      var X = 0,
        Y = 0,
        Z = 0
      points.forEach(lnglat => {
        var lng = (lnglat [0] * Math.PI) / 180
        var lat = (lnglat [1] * Math.PI) / 180
        var x, y, z
        x = Math.cos(lat) * Math.cos(lng)
        y = Math.cos(lat) * Math.sin(lng)
        z = Math.sin(lat)
        X += x
        Y += y
        Z += z
      })
      X = X / total
      Y = Y / total
      Z = Z / total

      var Lng = Math.atan2(Y, X)
      var Hyp = Math.sqrt(X * X + Y * Y)
      var Lat = Math.atan2(Z, Hyp)
      return ''+((Lng * 180) / Math.PI).toFixed(6)+', '+((Lat * 180) / Math.PI).toFixed(6)
    },
  }
}
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  position: relative;
  // overflow: hidden;
}

.map-box {
  flex: auto;
}

.map-tool {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  z-index: 9999;
}

::v-deep .el-button + .el-button {
  margin: 0;
}

::v-deep .el-button + .el-button:nth-child(2) {
  margin: 5px 0;
}

::v-deep .el-button + .el-button:nth-child(3) {
  margin-bottom: 5px;
}
</style>
